@import '../config';
* {
  font-weight: 300!important;
}

::-webkit-scrollbar {
  display: none;
}

.xin-widget-citys {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: $white;
  z-index: 10000;
  font-size: px2rem(14px);
  color: $darker;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  .xin-widget-citys-content {
    .xin-widget-citys-header {
      display: flex;
      align-items: center;
      height: px2rem(40px);
      padding: 0 px2rem(10px);
      background: $light;
      .xin-widget-citys-iptbox {
        flex: 1;
        height: 100%;
        input {
          display: block;
          width: 100%;
          height: 100%;
          border: none;
          outline: none;
          font-size: px2rem(12px);
          background: none;
          box-sizing: border-box;
        }
        input::-webkit-input-placeholder {
          color: #cdcdcd;
          text-align: left;
        }
      }
      a {
        display: block;
        padding-left: px2rem(10px);
        color: $dark;
      }
    }
    .xin-widget-citys-local {
      height: px2rem(20px);
      padding: px2rem(10px);
      line-height: px2rem(20px);
      text-align: center;
    }
    .xin-widget-citys-list {
      position: relative;
      dl {
        dt {
          height: px2rem(30px);
          padding: 0 px2rem(10px);
          line-height: px2rem(30px);
          font-size: px2rem(14px);
          color: $darker;
          background: #f0f0f0;
          em {
            position: relative;
            top: px2rem(1px);
            margin-right: px2rem(6px);
          }
        }
        dd {
          padding: 0 px2rem(10px);
          height: px2rem(30px);
          border-top: px2rem(1px) solid $light;
          line-height: px2rem(30px);
        }
        dt + dd {
          border-top: 0;
        }
      }
    }
  }
  .xin-widget-citys-searchlist {
    position: absolute;
    top: px2rem(40px);
    width: 100%;
    bottom: 0;
    z-index: 10001;
    background: $white;
    overflow: auto;
    li {
      margin: 0 px2rem(10px);
      height: px2rem(40px);
      line-height: px2rem(40px);
    }
    .nomatch {
      line-height: px2rem(40px);
      text-align: center;
      font-size: px2rem(12px);
      color: $darker;
    }
  }
  /***** 1px border *****/
  .bdt,
  .bdb,
  .bdtb,
  .bdl,
  .bdr,
  .bdlr {
    position: relative;
  }
  .bdl:before,
  .bdr:after,
  .bdlr:before,
  .bdlr:after,
  .bdt:before,
  .bdb:after,
  .bdtb:before,
  .bdtb:after {
    background-size: 100% 100%;
    position: absolute;
    content: '';
    z-index: 10
  }
  .bdl:before,
  .bdr:after,
  .bdlr:before,
  .bdlr:after {
    top: 0;
    width: 1px;
    height: 100%;
  }
  .bdt:before,
  .bdb:after,
  .bdtb:before,
  .bdtb:after {
    left: 0;
    height: 1px;
    width: 100%;
  }
  // 下边框
  .bdb:after {
    background-image: url('');
    bottom: 0;
  }
}

.xin-widget-citys-letnav {
  position: fixed;
  right: 0;
  bottom: 0;
  // width: px2rem(5px);
  top: px2rem(48px);
  padding-right: px2rem(26px);
  z-index: 10002;
  display: -webkit-box;
  -webkit-box-align: center;
  section {
    -webkit-box-flex: 1.0;
  }
  ol {
    text-align: right;
    padding-bottom: px2rem(48px);
    // margin-top: -px2rem(4px);
    li {
      padding: px2rem(3px) px2rem(2px);
      color: #666666;
      font-size: px2rem(12px);
      width: 100%;
      line-height: 100%;
      box-sizing: border-box;
      text-align: center;
    }
  }
}
.slide-enter,
.slide-leave-active {
  transform: translateX(100%)!important;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.star-big {
  width: px2rem(14px);
  height: px2rem(14px);
  display: inline-block;
  background-size: cover;
  background-image: url('');
}

.star-small {
  width: px2rem(12px);
  height: px2rem(12px);
  display: inline-block;
  background-size: cover;
  background-image: url('');
}
